<template>
  <div id="water-scan">
    <div class="water-scan-content">
      <p class="water-tip">请用户出示二维码，进行扫码！</p>
      <div class="scan-img">
        <img src="../../assets/img/scan.png" width="500" />
      </div>
      <div>
        <a-row type="flex" align="bottom">
          <a-col span="12">
            <p class="pay-code-tip">请用户出示二维码通过扫码墩扫码，或者</p>
            <p class="pay-code-tip">您也可以直接手工输入用户的二维码信息：</p>
          </a-col>
          <a-col span="12">
            <a-input
              @change="handleIn"
              style="width: 60%;"
              ref="code"
              v-model="authCode"
              placeholder="用户二维码信息"
            ></a-input>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import ACol from "ant-design-vue/es/grid/Col";
export default {
  components: { ACol },
  data() {
    return {
      authCode: ""
    };
  },
  mounted() {
    this.$refs.code.focus();
  },
  methods: {
    handleIn() {
      if (this.authCode.length === 22) {
        this.submit();
      }
    },
    submit() {
      if (!this.authCode) {
        this.$message.error("码值为空，请重新扫码！");
        return false;
      }
      this.api.serviceVoucher({ authCode: this.authCode }).then(res => {
        sessionStorage.setItem("voucher_info", JSON.stringify(res));
        if (res.name) {
          this.$message.info("操作成功！");
          this.authCode = "";
          this.$router.push("/voucher");
        }
      });
    }
  }
};
</script>

<style lang="less">
#water-scan {
  .water-scan-content {
    padding: 85px 50px 20px 50px;
    .water-tip {
      font-size: 25px;
      font-family: AlibabaPuHuiTiR;
      font-weight: 600;
      color: #d81e06;
    }

    .scan-img {
      width: 60%;
      margin: 0 auto;
    }

    .pay-code-tip {
      font-size: 16px;
      color: #333;
      padding: 2px 0;
    }
    .code-in {
      width: 60%;
      margin: 35px auto 10px auto;
    }
    .code-result {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      line-height: 32px;
    }
  }
}
p {
  margin: 0;
  padding: 0;
}
</style>
